"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Upload, Send, X } from "lucide-react"

interface MainInterfaceProps {
  selectedProject: string
  selectedTemplate: string
  selectedData: string
  setSelectedProject: (project: string) => void
  setSelectedTemplate: (template: string) => void
  setSelectedData: (data: string) => void
}

type ProcessStatus = "检索状态" | "模板分析" | "信息抽取" | "报告生成"

export default function MainInterface({
  selectedProject,
  selectedTemplate,
  selectedData,
  setSelectedProject,
  setSelectedTemplate,
  setSelectedData,
}: MainInterfaceProps) {
  const [input, setInput] = useState("")
  const [currentStatus, setCurrentStatus] = useState<ProcessStatus>("检索状态")
  const [results, setResults] = useState<string>("欢迎使用文档处理系统！请选择项目、模板和数据，然后输入命令开始操作。")
  const [uploadedFile, setUploadedFile] = useState<File | null>(null)

  const handleSubmit = () => {
    if (!input.trim()) return

    // 模拟处理逻辑
    setResults((prev) => prev + `\n\n用户输入: ${input}\n系统响应: 正在处理您的请求...`)
    setInput("")
  }

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setUploadedFile(e.target.files[0])
    }
  }

  const removeUploadedFile = () => {
    setUploadedFile(null)
  }

  const getStatusColor = (status: ProcessStatus) => {
    switch (status) {
      case "检索状态":
        return "bg-blue-500"
      case "模板分析":
        return "bg-yellow-500"
      case "信息抽取":
        return "bg-green-500"
      case "报告生成":
        return "bg-purple-500"
      default:
        return "bg-gray-500"
    }
  }

  return (
    <div className="flex flex-col h-full">
      {/* 结果交互区 - 删除了名称和名称栏 */}
      <div className="flex-1 p-4" style={{ height: "60%" }}>
        <div className="h-full border rounded-lg">
          <ScrollArea className="h-full p-4">
            <div className="whitespace-pre-wrap text-sm">{results}</div>
          </ScrollArea>
        </div>
      </div>

      {/* 状态区 */}
      <div className="px-4 py-2 border-t border-b bg-muted/30" style={{ height: "10%" }}>
        <div className="flex items-center justify-between h-full">
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <span className="text-sm font-medium">项目:</span>
              <Select value={selectedProject} onValueChange={setSelectedProject}>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="选择项目" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="project1">项目一</SelectItem>
                  <SelectItem value="project2">项目二</SelectItem>
                  <SelectItem value="project3">项目三</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="flex items-center gap-2">
              <span className="text-sm font-medium">模板:</span>
              <Select value={selectedTemplate} onValueChange={setSelectedTemplate}>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="选择模板" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="template1">报告模板1</SelectItem>
                  <SelectItem value="template2">报告模板2</SelectItem>
                  <SelectItem value="template3">报告模板3</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="flex items-center gap-2">
              <span className="text-sm font-medium">数据:</span>
              <Select value={selectedData} onValueChange={setSelectedData}>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="选择数据" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="data1">数据源1</SelectItem>
                  <SelectItem value="data2">数据源2</SelectItem>
                  <SelectItem value="data3">数据源3</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <span className="text-sm font-medium">当前状态:</span>
            <Badge className={`${getStatusColor(currentStatus)} text-white`}>{currentStatus}</Badge>
          </div>
        </div>
      </div>

      {/* 上传文件区域 - 新增 */}
      <div className="px-4 pt-3">
        <div className="flex items-center gap-2">
          <input type="file" id="file-upload" className="hidden" onChange={handleFileUpload} />
          <label htmlFor="file-upload" className="cursor-pointer">
            <Button variant="outline" size="sm" type="button" className="flex items-center gap-1">
              <Upload className="h-4 w-4" />
              上传文件
            </Button>
          </label>

          {uploadedFile && (
            <div className="flex items-center gap-2 px-3 py-1 bg-muted/30 rounded-md">
              <span className="text-sm truncate max-w-[200px]">{uploadedFile.name}</span>
              <Button variant="ghost" size="sm" className="h-5 w-5 p-0" onClick={removeUploadedFile}>
                <X className="h-3 w-3" />
              </Button>
            </div>
          )}
        </div>
      </div>

      {/* 功能沟通区 - 删除了名称和名称栏，确定按钮移到右下角 */}
      <div className="p-4" style={{ height: "20%" }}>
        <div className="h-full border rounded-lg">
          <div className="p-4 h-full">
            <div className="flex flex-col h-full">
              <Textarea
                placeholder="请输入命令或描述您需要执行的操作..."
                value={input}
                onChange={(e) => setInput(e.target.value)}
                className="flex-1 resize-none"
              />
              <div className="flex justify-end mt-2">
                <Button onClick={handleSubmit} size="sm">
                  <Send className="h-3 w-3 mr-1" />
                  确定
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
